<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>聊天页面</title>
</head>
<body>
    <p>聊天室</p>
    <form id="wiselyForm">
        <textarea rows="4" cols="60" name="text"></textarea>
        <input type="submit"/>
    </form>
    <script type="text/javascript" src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
    <script type="text/javascript" th:src="@{jquery-3.3.1.js}"></script>
    <script th:inline="javascript">
        $('#wiselyForm').submit(function (e) {  //e代表事件
            e.preventDefault();
            var text = $('#wiselyForm').find("textarea[name='text']").val();
            sendSpittle(text);
        });
        //1.连接endpoint 名称为"/endpointChat" 的endpoint
        //2.订阅"/queue/notifications"发送的消息，这里与在控制器的 messagingTemplate.convertAndSendToUser中定义的订阅地址保持一致
        //  这里多了一个/user,并且这个/user是必须的，使用了/user才可以发送消息到指定的用户
        //3.通过stomp.send 向/chat 目标(destination)发送消息，这个是在控制器的@MessageMapping中定义的
        var sock = new SockJS("/crm_boot/endpointChat"); //1.
        var stomp = Stomp.over(sock);
        stomp.connect('guest','guest',function (frame) {
            stomp.subscribe("/user/queue/notifications",handleNotification);    //2.
        });
        function handleNotification(message) {
            $('#output').append("<b>Received:"+message.body+"</b><br/>");
        }
        function sendSpittle(text) {
            stomp.send("/chat",{},text);    //3.
        }
        $('#stop').click(function () {
            sock.close();
        });
    </script>
    <div id="output"></div>
</body>
</html>